<template>
    <div>
        <h1>hello world</h1>
        <h2> {{ msg }}</h2>
        <h2>{{ num }}</h2>
        <input type="text" name="" id="" v-model="num">
        <button @click="add">点击加法</button>



        <ul>
            <li v-for="(value, key, index) in obj" :key="index">
                <div>{{ value }}---{{ key }}---{{ index }}</div>
            </li>
        </ul>

        <ul>
            <li v-for="(value, key, index) in obj1" :key="index">
                <div>{{ value }}---{{ key }}---{{ index }}</div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref,reactive } from 'vue'

export default defineComponent({
    setup() {

        // 在数据上包一个ref,先在import当中引入ref,对基本数据类型的处理包上ref,(处理引用数据类型不是这种方法)
        //当基本数据类型包上ref之后，变为一个响应式的数据，数据就变为一个ref对象，通过get和set变为响应式数据
        let msg = ref("文能提笔控萝莉");
        let num = ref(0);

        function add() {
            console.log(num);
            console.log(num.value);

            num.value += 1;

        }

        //引用数据类型的
        // 使用ref或者reactive都需要在import当中引入
        //reactive将其变为proxy实现了数据的响应式变换
        // 使用ref包裹对象之后，该对象变为ref对象，是响应式数据，但是value值不是该对象  是proxy代理对象
        //使用 reactive将对象变为响应式对象，直接它就是proxy
        let obj1 = reactive({
            name: "jack",
            age: 18
        })


        let obj = {
            name: "tom",
            age: 20
        }

        return {
            msg,
            num,
            add,
            obj1,

            obj
        }
    }
})
</script>

<style scoped>

</style>